<template>
  <el-dialog
    :title="$t('caseorder.anli47')"
    :visible.sync="dialogShow"
    width="700px"
    height="300px"
    @close="cancel"
    :close-on-click-modal="false"
  >
    <div class="uploadDesign_inner">
      <el-form ref="form" label-position="top" label-width="100px" :model="form" :rules="rules">
        <el-form-item :label="$t('caseorder.anli48')" prop="designContent">
          <el-input
            v-model="form.designContent"
            type="textarea"
            :placeholder="$t('caseorder.anli49')"
          />
        </el-form-item>
        <el-form-item :label="$t('caseorder.anli50') + '：'" prop="designFileUrl">
          <el-upload
            ref="upload"
            class="upload-demo"
            :limit="10"
            accept=".stl,.obj,.ply,.stp,.step,.gsd,.3mf,.png,.jpg,.jpeg,.gif,.dmg,.exe,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.pkg,.zip,.rar,.7z,.ple,.tar,.mp4,.m
            pg,.flv,.mp3,.wmv,.asf,.rm,.rmvb,.mov,.avi,.dat,.mpeg,.bin,.img,.dae,.pdf"
            :multiple="true"
            action=""
            :on-change="handleFileChange"
            :on-remove="onRemove"
            :before-remove="beforeRemove"
            :on-exceed="fileExceed"
            :auto-upload="false"
            :file-list="fileList"
            :http-request="httpRequest"
          >
            <el-button slot="trigger" size="small" type="primary">{{
              $t('caseorder.anli51')
            }}</el-button>
            <!-- <el-button style="margin-left: 10px;" v-if="fileList.length > 0" size="small" type="success"
              @click="httpRequest">上传文件</el-button> -->
          </el-upload>
          <!-- <el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload"
            :file-list="fileList" :http-request="httpRequest" :on-change="handleChanged" :auto-upload="false">
            <el-button slot="trigger" size="small">选取文件</el-button>
          </el-upload> -->
          <div style="margin-top: -10px">{{ form.designFileName }}</div>
          <div class="progress">
            <span>{{ $t('versionManagement.uploadProgress') }}：</span>

            <el-progress
              :text-inside="true"
              :stroke-width="16"
              :percentage="uploadPercentage"
              text-color="#FFFFFF"
            />
          </div>
          <div style="margin-top: 16px">
            {{ $t('caseorder.anli52') }}:
            stl,obj,ply,stp,step,gsd,3mf,png,jpg,jpeg,gif,dmg,exe,doc,docx,ppt,pptx,xls,xlsx,pkg,zip,rar,7z,ple,tar,mp4,m
            pg,flv,mp3,wmv,asf,rm,rmvb,mov,avi,dat,mpeg,bin,img,dae,pdf
          </div>
        </el-form-item>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('caseorder.anli53') }}</el-button>
      <el-button type="primary" @click="submitHandle()">{{ $t('caseorder.anli54') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  // 上传设计
  name: 'BLZMasterUploadDesign',

  data() {
    return {
      form: {
        id: '',
        designFileUrl: 'https://www.baidu.com/',
        designContent: '', // 说明
        designFileName: '', // 文件名
      },
      dialogShow: false,
      actionUrl: 'http://192.168.110.125:8090/renren-admin/tools/upload',
      // 回显附件列表
      fileList: [],
      // 上传附件列表
      files: [],
      uploadPercentage: 0,

      rules: {
        designContent: [{ required: true,
message: this.$t('caseorder.anli61'),
trigger: 'blur' }],
      },
    };
  },

  mounted() {},

  methods: {
    // 上传文件之前
    beforeUpload(file) {
      // console.log("上传文件之前", file)
      this.fileList.forEach((item) => {
        if (isEquael(item.fileName, file.name)) {
          return this.$message.warning(this.$t('caseorder.anli55'));
        }
      });
      this.$refs.upload.submit();
    },
    // 上传发生变化钩子
    handleFileChange(file, fileList) {
      if (file.name.includes('.txt')) {
        file = {};
        fileList = [];
        this.$refs.upload.uploadFiles.splice(0, 1); // 关键作用代码，去除文件列表失败文件
        return this.$message.error('请上传正确的文件格式');
      } else {
        this.files = fileList;
        this.fileList.push(file);
      }
    },
    // 文件个数超过最大限制时
    fileExceed(file, fileList) {
      if (this.fileList.length > 10) {
        this.$message.warning(this.$t('caseorder.anli56'));
      }
    },
    // 删除前的钩子
    beforeRemove(file, fileList) {
      return this.$confirm(this.$t('caseorder.anli57') + `${file.name}？`, {
        confirmButtonText: this.$t('add.add64'),
        cancelButtonText: this.$t('add.add65'),
        type: 'warning',
      });
    },
    // 删除的钩子
    onRemove(file, fileList) {
      this.files = fileList;
      this.fileList = fileList;
    },
    handleChanged(file, fileList) {
      this.fileList = fileList;
      if (this.fileList.length == 0) {
        this.$message.error(this.$t('caseorder.anli58'));
        return;
      }
    },
    httpRequest() {
      if (this.files.length === 0) {
        return this.$message.warning(this.$t('caseorder.anli59'));
      }
      const formData = new FormData();
      this.files.forEach((file) => {
        formData.append('file', file.raw);
      });
      let startTime = new Date().valueOf();
      this.$http({
        url: '/tools/uploadMulti',
        method: 'post',
        data: formData,
        onUploadProgress: (progressEvent) => {
          this.uploadPercentage = ((progressEvent.loaded / progressEvent.total) * 100) | 0; //百分比
        },
      })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            const designFileUrl = [];
            const designFileName = [];
            res.data.forEach((item) => {
              designFileUrl.push(item.filepath);
              designFileName.push(item.oldName);
            });
            this.form.designFileUrl = designFileUrl.join(',');
            this.form.designFileName = designFileName.join(',');
            this.$http
              .post('/order/orderUploadDesign', this.form)
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg);
                } else {
                  this.$message.success(this.$t('caseorder.anli60'));
                  this.$emit('getSelectPageList');
                  this.dialogShow = false;
                  this.fileList = [];
                  this.files = [];
                  this.form = {
                    id: '',
                    designFileUrl: 'https://www.baidu.com/',
                    designContent: '', // 说明
                    designFileName: '',
                  };
                }
              })
              .catch((err) => {
                console.log('err', err);
              });
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 取消
    cancel() {
      this.dialogShow = false;
      this.form = {
        id: '',
        designFileUrl: 'https://www.baidu.com/',
        designContent: '', // 说明
        designFileName: '',
      };
      this.fileList = [];
      this.files = [];
    },
    // 提交
    submitHandle() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.httpRequest();
        }
      });
    },
  },
};
</script>

<style lang="scss">
.upload_file {
  .el-upload {
    text-align: left;

    .el-upload-dragger {
      height: 33px;
      background: rgba(244, 244, 244, 0.39);
      width: 500px;
      border: 1px solid #d9d9d9;

      .upload_file_inner {
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 10px;

        span:nth-of-type(1) {
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #999999;
        }

        img {
          // background-color: red;
          width: 13px;
          height: 16px;
        }

        span:nth-of-type(2) {
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #003e67;
        }
      }
    }
  }
}

// .upload_file{
//     .el-upload{
//       text-align: left;
//     .el-upload-dragger{
//       height: 40px;
//       background: rgba(244,244,244,0.39);
//       .upload_file_inner{
//         // display: flex;
//         // align-items: center;
//         padding-left: 10px !important;
//         span:nth-of-type(1){
//           font-size: 14px;
//           font-weight: 400;
//           line-height: 20px;
//           color: #999999;
//         }
//         img{
//           // background-color: red;
//           width: 13px;
//           height: 16px;
//         }
//         span:nth-of-type(2){
//           font-size: 14px;
//           font-weight: 400;
//           line-height: 20px;
//           color: #003E67;
//         }
//       }
//     }
//   }
// }
</style>
